<template>
    <div class="item">
  <nut-row type="flex" justify="space-between">
    <nut-col :span="20">
      <nut-button plain type="primary" size="mini">最热</nut-button>
      <nut-button plain type="primary" size="mini">最新</nut-button>
      <nut-button plain type="primary" size="mini">人气</nut-button>
      <nut-button plain type="primary" size="mini">评分</nut-button>
    </nut-col>
    <nut-col :span="3">
      <nut-icon
        font-class-name="iconfont"
        class-prefix="icon"
        name="search"
      ></nut-icon>
    </nut-col>
  </nut-row>
 <ul class="infiniteUl" id="scroll">
    <nut-infiniteloading
        containerId = 'scroll'
        :use-window='false'
        :has-more="hasMore"
        @load-more="loadMore"
    >
        <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
    </nut-infiniteloading>
  </ul>
    </div>
</template>

<script>
 import { ref,reactive,onMounted,toRefs} from 'vue';
  export default {
    setup(props) {
      const hasMore = ref(true);
      const data = reactive({
        defultList: []
      });

      const loadMore = done => {  
        setTimeout(() => {
          const curLen = data.defultList.length;
          for (let i = curLen; i < curLen + 10; i++) {
            data.defultList.push(`${i}`);
          }
          if (data.defultList.length > 50) hasMore.value = false;
          done()
        }, 500);
      };

      const init = () => {
        for (let i = 0; i < 20; i++) {
          data.defultList.push(`${i}`);
        }
      };

      onMounted(() => {
        init()
      });
      
      return { loadMore, hasMore, ...toRefs(data) };
    }
  }
</script>

<style lang="scss" scoped>
.item {
    //display: flex;
    //flex-direction: column;
}
.infiniteUl {
    height: 430px;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background:#eee
}
.infiniteLi {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(100, 100, 100, 1);
  text-align: center;
}
</style>